<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>头条</button>
    <button>科技</button>
    <button>美食</button>
    <button>娱乐</button>

    <script>
      // 1. 获取所有按钮元素
      const btns = document.querySelectorAll("button");

      // 2. 遍历每个按钮
      btns.forEach((item) => {
        // 3. 为每个按钮添加点击事件监听器
        item.addEventListener("click", () => {
          // 4. 当一个按钮被点击时，首先移除所有按钮的背景色
          btns.forEach((v) => {
            v.style.backgroundColor = "";
          });
          // 5. 然后设置被点击的按钮的背景色为红色，以高亮显示
          item.style.backgroundColor = "red";
        });
      });
    </script>
  </body>
</html>
